<%--
  Created by IntelliJ IDEA.
  User: 曹子阳
  Date: 2021/6/1
  Time: 10:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

</head>
<style>
    .public-div {
        border: 3px solid #fff;
        border-radius: 11px;
        margin: 10px 8px 20px 8px;
        padding: 10px;
    }
</style>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>网站图 - 缩列图</legend>
</fieldset>

<div style="text-align: center" class="layui-upload public-div">
    <button type="button" class="layui-btn" id="test1">上传网站缩列图</button>
    <div class="layui-upload-list">
        <img width="200ox" height="200px" class="layui-upload-img" id="demo1">
        <p id="demoText"></p>
    </div>
    <div style="width: 100%;">
        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
            <div class="layui-progress-bar" lay-percent=""></div>
        </div>
    </div>
</div>

<div class="public-div">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>网站 - 基本信息</legend>
    </fieldset>
    <p class="layui-anim layui-anim-upbit mc-ui-flex-end" style="text-align:center;
    font-size:18px">
        &nbsp;
    </p>

    <input id="title" name="title" class="layui-input layui-anim layui-anim-upbit" type="text" autocomplete="off"
           placeholder="请输入网站标题"/>
    <p class="layui-anim layui-anim-up mc-ui-flex-end" style="text-align:center;
    font-size:18px">
    <p class="layui-anim layui-anim-up mc-ui-flex-end" style="text-align:center;
    font-size:18px">
        &nbsp;
    </p>

    <input id="keywords" name="keywords" class="layui-input layui-anim layui-anim-upbit" type="text" autocomplete="off"
           placeholder="请输入网站关键词"/>
    <p class="layui-anim layui-anim-up mc-ui-flex-end" style="text-align:center;
    font-size:18px">
    <p class="layui-anim layui-anim-up mc-ui-flex-end" style="text-align:center;
    font-size:18px">
        &nbsp;
    </p>
    <input id="description" name="description" class="layui-input layui-anim layui-anim-upbit" type="text"
           autocomplete="off"
           placeholder="请输入网站内容摘要"/>
    <p class="layui-anim layui-anim-up mc-ui-flex-end" style="text-align:center;
    font-size:18px">

    <p class="layui-anim layui-anim-up mc-ui-flex-end" style="text-align:center;
    font-size:18px">
        &nbsp;
    </p>
    <input id="password" name="password" class="layui-input layui-anim layui-anim-upbit" type="text" autocomplete="off"
           placeholder="请输入网站密码,不设置为空"/>
    <p class="layui-anim layui-anim-up mc-ui-flex-end" style="text-align:center;
    font-size:18px">

</div>

<div class="public-div">
    <form class="layui-form" action="">

        <div class="layui-inline">
            <div class="layui-input-inline">
                <select id="labelSelect" name="modules" lay-verify="required" lay-search="">
                    <option value="">可以直接搜索选择标签哦</option>
                </select>
            </div>
        </div>

    </form>


</div>

<div class="public-div">
    <iframe width="100%" height="100%" src="/page/editor" name="editor"></iframe>
</div>


<div class="public-div" style="text-align: center">
    <button onclick="function sendContentToServer() {

    }
    sendContentToServer()" type="button" name="upload"
            class="layui-btn layui-btn-radius layui-btn-fluid layui-btn-normal layui-anim layui-anim-scale"
            id="testListAction">发布网站
    </button>
</div>
</body>

</html>
<script>
    layui.use(['upload', 'element', 'layer'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , bindAction: '#testListAction'
            , auto: false
            , url: 'article.api/upload' //改成您自己的上传接口
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('模拟上传成功', {icon: 16, time: 0});

                setInterval(layer.closeAll, 1500);
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败,' + res.msg);
                }


                //上传成功的一些操作


                // 1.获取标题 关键词 内容摘要 网站内容 信息
                let title = $('#title').val();
                let keywords = $('#keywords').val();
                let description = $('#description').val();
                let password = $('#password').val();
                let labelSelect = $('#labelSelect').val();
                let editorContent = editor.window.getEditorContent();
                let image = res.src;
                console.log(title)
                console.log(keywords)
                console.log(description)
                console.log(password)
                console.log(labelSelect)
                console.log(editorContent)
                console.log(image)
                // 2.提交到数据库
                $.post(
                    'article.api/add?title=' + title +
                    '&keywords=' + keywords +
                    '&description=' + description +
                    '&password=' + password +
                    '&label_id=' + labelSelect +
                    '&content=' + editorContent,
                    '&image=' + image,
                    function (reg) {
                        console.log(reg)
                    }
                )


                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {

                    // 进度条成功了干一些事情

                    // 设置为禁用按钮
                    $('#testListAction').addClass("layui-btn-disabled").prop("disabled", true);

                    // 提醒 并 设置回调
                    layer.msg("正在发布,请稍等", {time: 500}, function () {

                        layer.msg('发布成功', {icon: 1, time: 2000}, function () {
                            // 设置为启用按钮
                            $('#testListAction').addClass("layui-btn-disabled").prop("disabled", false);
                            $('#testListAction').removeClass("layui-btn-disabled")
                        });

                    })

                }
            }
        });
    });
</script>

<script>
    layui.use(['layedit', 'laydate', 'jquery'], function () {
        var laydate = layui.laydate;
        var $ = layui.jquery;

        $.post('http://localhost:8082/label.api/get?page=1&limit=999999', '', function (reg) {

            for (const item of reg.data) {
                $('#labelSelect').append(`<option title=` + item.describe + ` value=` + item.id + ` ">` + item.name + `</option>`)
            }
            layui.form.render("select");
        })
    });
</script>

